<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BootCdn</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->

      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <style>
        .top_1{
            background-color: #27AE60;

            padding-left: 0px;
            padding-right: 0px;
        }
        a{
            text-decoration-line: none;
            color: white;
        }
        .head_1{
         vertical-align:middle;
            margin-top:15px ;
        }
        .wz_1{
            color: white;
            font-size: 60px;
            text-shadow: 2px 2px 2px darkgreen;
        }
        .top_2{
            background-color: gainsboro;
        }
    </style>
</head>
<body>
    <div class="top_1 container-fluid">
        <div class="row">
            <div class="col-md-3 col-md-offset-2">
                <img src="bootcdn/ico_1.png" width="100" height="50">
            </div>
        <div class="head_1 col-md-3 col-md-offset-4">
            <a href="https://www.bootcdn.cn/api/">API</a>
            <a href="https://blog.bootcdn.cn/">博客</a>
            <a href="https://www.bootcdn.cn/#about">关于</a>
        </div>
        </div>
        <div class="col-md-4 col-md-offset-4" >
            <P class="wz_1">BootCDN</P>
        </div>
        <div class="col-md-10 col-md-offset-3">
            <p  style="color: white;font-size: 20px; text-shadow: 1px 1px 1px darkgreen">稳定、快速、免费、的前端开源项目CDN加速服务</p>
        </div>
        <div class="col-md-4 col-md-offset-4">
            <p style="color: white;font-size: 15px;"> 共收录了3382个前端开源项目</p>
        </div>
        <div class="input-group input-group-lg" style="width: 75%;padding-left: 20% ;">
            <input type="text" class="form-control" placeholder="搜索开源库，例如:jQuery" aria-describedby="search">
            <span  id="search" class="input-group-addon" ><span class="glyphicon glyphicon-search" ></span></span>
        </div>
        <br>
        <br>
        <br>
    </div>
    <div class="container-fluid">
        <div class="top_2 row">
        <br>
        <div class="col-md-1 col-md-offset-1">
            <a href="https://www.bootcdn.cn/bootstrap/"><img src="bootcdn/bootstrap.svg" width="50px" height="50px"></a>
        </div>
        <div class="col-md-1">
            <a href="https://www.bootcdn.cn/react/"><img src="bootcdn/react.svg" width="50px" height="50px"></a>
        </div>
        <div class="col-md-1">
            <a href="https://www.bootcdn.cn/jquery/"><img src="bootcdn/jquery.svg" width="150px" height="50px"></a>
        </div>
        <div class="col-md-1 col-md-offset-1">
             <a href="https://www.bootcdn.cn/angular.js/"><img src="bootcdn/angular-icon.svg" width="50px" height="50px"></a>
        </div>
        <div class="col-md-1">
            <a href="https://www.bootcdn.cn/vue/"><img src="bootcdn/vue.svg" width="50px" height="50px"></a>
        </div>
        <div class="col-md-1">
            <a href="https://www.bootcdn.cn/backbone.js/"><img src="bootcdn/backbone-icon.svg" width="50px" height="50px"></a>
        </div>
        <div class="col-md-1">
            <a href="https://www.bootcdn.cn/lodash.js/"><img src="bootcdn/lodash.svg" width="50px" height="50px"></a>
        </div>
        <div class="col-md-1">
             <a href="https://www.bootcdn.cn/moment.js/"><img src="bootcdn/momentjs.svg" width="50px" height="50px"></a>
        </div>
         <div class="row">
              <div class="col-md-12">
                <br>
            </div>
         </div>
        </div>
    </div>
    <div class="dec_1 ">
        <br>
        <br>
        <a href="https://blog.bootcdn.cn/only-https/" style="color:gray ;padding-left: 800px " >拒绝流量劫持，全面使用HTTPS！</a>
        <br>
        <br>
    </div>


    <div class="table_1 container">

            <table class="table table table-hover" style="padding-right: 70px">
            <tr>
                <td width="20%" height="50px">
                    <b>bootstrap</b>
                </td>
                <td style="color:gray" width="80%" height="70px">
                    Bootstrap是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备有限的WEB项目
                </td>
            </tr>
            <tr>
                <td width="20%" height="50px">
                    <b>react</b>
                </td>
                <td style="color: gray" width="80%" height="70px">
                    React是用于建构用户界面的JavaScript工具库
                </td>
            </tr>
            <tr>
               <td width="20%" height="50px">
                   <b>vue</b>
               </td>
                <td style="color: gray" width="80%" height="70px">
                    Vue是一套用于构建用户界面的渐进式框架。与其他大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手还便于与第三方库或既有项目整合。
                </td>
            </tr>
            <tr>
                <td width="20%" height="50px">
                    <b>angular.js</b>
                </td>
                <td style="color: gray" width="80%" height="70px">
                    Angular是一个开发平台。它能帮你更轻松的建构Web应用。Angular集声明式模板、依赖注入、端到端工具和一些最佳实践于一身，为你解决开发方面的各种挑战。Angular为开发者提升构建Web、手机或桌面应用的能力。
                </td>
            </tr>
                <tr>
                    <td width="20%" height="50px" >
                        <b>jquery</b>
                    </td>
                    <td style="color: gray" width="80%" height="70px">
                        jQuery是一个高效、精简并且功能丰富的JavaScript工具库。它提供的API易于使用且兼容众多浏览器，折让注入HTML文档遍历和操作、事件处理、动画和Ajax操作更加简单。
                    </td>
                </tr>
                <tr>
                    <td width="20%" height="50px" >
                       <b>socket.io</b>
                    </td>
                    <td style="color: gray" width="80%" height="70px">
                        socket.io是用于构建实时通讯服务的框架
                    </td>
                </tr>
                <tr>
                    <td width="20%" height="50px">
                        <b>semantic-ui</b>
                    </td>
                    <td style="color: gray" width="80%" height="70px">
                        Semantic作为一款开发框架，帮助开发者使用对人类友好HTMl语言构建优雅的响应式布局。
                    </td>
                </tr>
                <tr>

                </tr>
        </table>
        </div>


    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>